<template>
    <div>
        <div class="userlist">
            <div class="search">
                <div class="search-up">
                    <el-button @click="addDialog=true" style="border: 1px solid #0846B9;color:#0846B9">+新增</el-button>
                </div>
                <div class="search-down">
                    <span>人员名称:</span>
                    <el-input class="search-input" v-model="searchKeyword" clearable size="mini"></el-input>
                    <div class="search-down-btn">
                        <el-button size="small" @click="search" style="color:white;background-color: #0846B9">搜索</el-button>
                        <el-button size="small" @click="resetsearch" style="border: 1px solid #0846B9;color:#0846B9">重置</el-button>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <div class="wrapper">
                <el-table :data="userlist.slice((pageIndex-1)*pageSize,pageIndex*pageSize)" show-overflow-tooltip="true" 
                style="width: 100%" v-loading="loading">
                    <el-table-column type="index" label="序号" width="65" align="center"></el-table-column>
                    <el-table-column prop="dept_name" label="部门名称" align="center"></el-table-column>
                    <el-table-column prop="user_name" label="人员名称" align="center"></el-table-column>
                    <el-table-column prop="user_mobile" label="联系电话" align="center"></el-table-column>
                    <el-table-column prop="user_nickname" label="登录账号" align="center"></el-table-column>
                    <el-table-column label="操作" width="200px" align="center">
                        <template slot-scope="scope">
                            <!-- 修改本行数据，点击弹出编辑用户的对话框 -->
                            <el-button type="text"
                                @click="updateDialogBtn(scope.row.user_id,scope.row.user_name,scope.row.user_nickname
                                        ,scope.row.user_mobile,scope.row.dept_id,scope.row.role_id,scope.row.organization_id)">
                                编辑
                            </el-button>
                            <!-- 删除本行数据 -->
                            <el-button type="text" @click="deleteDialog(scope.row.user_id)">删除</el-button>
                            <!-- 重置密码 -->
                            <el-button type="text" @click="resetPassword(scope.row.user_id)">重置密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="page">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="userInfo.pageIndex"
                        :page-sizes="[1, 2, 5, 10]"
                        :page-size="userInfo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalRecords">
                    </el-pagination>
                </div>
            </div>
        </div>
        
        <!-- 新增的对话框 -->
        <el-dialog
            title="人员信息新增"
            :visible.sync="addDialog"
            width="50%"
            @close="addDialogClosed"
            append-to-body>
            <el-form :model="addForm" :rules="UserlistFormRules" 
                ref="addUserlistFormRef" label-width="150px">
                <el-form-item label="人员名称：" prop="user_name">
                    <el-input v-model="addForm.user_name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：" prop="user_mobile">
                    <el-input v-model="addForm.user_mobile"></el-input>
                </el-form-item>
                <el-form-item label="登录账号：" prop="user_nickname">
                    <el-input v-model="addForm.user_nickname"></el-input>
                </el-form-item>
                <el-form-item label="所属角色：" prop="role_id">
                    <el-select v-model="addForm.role_id" placeholder="请选择">
                        <el-option v-for="(item,index) in rolelist" :key="index"
                        :label="item.role_name" :value="item.role_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属部门：" prop="dept_id">
                    <el-select v-model="addForm.dept_id" placeholder="请选择">
                        <el-option v-for="(item,index) in deptlist" :key="index"
                        :label="item.dept_name" :value="item.dept_id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addUser">提交</el-button>
                <el-button @click="addDialog = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 编辑的对话框 -->
        <el-dialog
            title="人员信息编辑"
            :visible.sync="updateDialog"
            width="50%"
            append-to-body>
            <el-form :model="updateForm" :rules="UserlistFormRules" 
                ref="updateUserlistFormRef" label-width="150px">
                <el-form-item label="人员名称：" prop="user_name">
                    <el-input v-model="updateForm.user_name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：" prop="user_mobile">
                    <el-input v-model="updateForm.user_mobile"></el-input>
                </el-form-item>
                <el-form-item label="登录账号：" prop="user_nickname">
                    <el-input v-model="updateForm.user_nickname"></el-input>
                </el-form-item>
                <el-form-item label="所属角色：" prop="role_id">
                    <el-select v-model="updateForm.role_id" placeholder="请选择">
                        <el-option v-for="(item,index) in rolelist" :key="index"
                        :label="item.role_name" :value="item.role_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属部门：" prop="dept_id">
                    <el-select v-model="updateForm.dept_id" placeholder="请选择">
                        <el-option v-for="(item,index) in deptlist" :key="index"
                        :label="item.dept_name" :value="item.dept_id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateDialog = false">取 消</el-button>
                <el-button type="primary" @click="updateUser">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { request } from '../../../../api/axios'
import { checkMobile } from "../../../../api/check"


export default {
    name:"Userlist",
    props:{
        // 从Organization组件接收到的本行的organization_id
        f_organization_id:String
    },
    data(){
        return{
            // 查询用户信息渲染的参数
            userInfo:{
                ilist: [
                    {
                    title: "organization_id",
                    content: this.f_organization_id
                    }
                ]
            },
            
            // 分页
            pageIndex: 1,   //第几页
            pageSize: 10,   //一页几条
            // getList()请求来的用户列表,用于渲染页面
            userlist:[],
            totalRecords:0,
            locallist:"",   //搜索事件时数据暂存至locallist中
            loading:true,

            Info:{
                ilist: [
                    {
                    title: "string",
                    content: "string"
                    }
                ]
            },
            // 搜索框输入的关键词
            searchKeyword:"",
            // 搜索结果
            searchResult:[],
            searchResultRecords:0,

            // 添加用户对话框的显示与隐藏
            addDialog:false,
            // 添加用户的表单数据
            addForm:{
                user_id:"",
                user_nickname: "",
                user_name: "",
                user_mobile: "",
                dept_id: "",
                role_id: "",
                organization_id: ""
            },
                // 请求来的角色信息，getRole()
                rolelist:[],
                // 请求来部门信息
                deptlist:[],

            // 修改用户对话框的显示与隐藏
            updateDialog:false,
            // 修改用户的表单数据
            updateForm:{
                user_id:"",
                user_name:"",
                user_nickname:"",
                user_mobile:"",
                dept_id: "",
                role_id: "",
                organization_id: ""
            },

            // 要删除用户的id
            deleteuser:{
                user_id:""
            },

            // 重置密码的参数
            resetpassword:{
                user_id:""
            },

            // 表单验证规则
            // 新增和编辑表单的规则
            UserlistFormRules:{
                user_name:[
                    {required:true,message:"请输入用户名",trigger:"blur"},
                    {min:1,max:20,message:"长度在 1 到 20 个字符",trigger:"blur"}
                ],
                user_mobile:[
                    {required:true,message:"请输入联系电话",trigger:"blur"},
                    {validator:checkMobile,trigger:"blur"}
                ],
                user_nickname:[
                    {required:true,message:"请输入登陆账号",trigger:"blur"},
                    {min:1,max:50,message:"长度在 1 到 50 个字符",trigger:"blur"}
                ],
                role_id:[{required:true,message:"请选择所属角色",trigger:"blur"},],
                dept_id:[{required:true,message:"请选择所属部门",trigger:"blur"},]
            },
        }
    },
    created(){
        this.getUserList();
        this.getRole()
        this.getDept()
    },
    watch:{
        f_organization_id:{
            handler:function(params) {
                this.$nextTick(function() {
                    console.log(this.f_organization_id)
                    this.userInfo.ilist[0].content=this.f_organization_id
                    this.getUserList()
                    this.getDept()
                    this.loading=true
                })
            }
        }
    },
    methods:{
        // getList()进入页面自动获取全部数据渲染页面
        async getUserList(){
            await request("post","/User_Info/GetStatus",this.userInfo).then(res =>{
                console.log(res)
                this.userlist=res.resultList
                this.totalRecords=res.totalRecords
                this.locallist=res.resultList
                this.loading=false
            })
        },

        // 搜索事件
        search(){
            this.userlist=this.locallist
            this.searchResult=[]
            console.log(this.searchKeyword)
            for(let i=0;i<this.userlist.length;i++){
                if(this.userlist[i].user_name.indexOf(this.searchKeyword) >-1){
                    this.searchResult.push(this.userlist[i])
                    this.searchResultRecords+=1
                }
            }
            this.userlist=this.searchResult
            this.totalRecords=this.searchResultRecords
        },
        // 重置搜索框
        resetsearch(){
            this.searchKeyword=""
            this.getUserList()
        },

        // 点击按钮，添加新用户
        async addUser(){
            this.addForm.organization_id=this.f_organization_id
            await this.$refs.addUserlistFormRef.validate(valid =>{
                console.log(valid)  //valid返回一个true或false
                if(!valid) return
                request("post","User_Info/InsertStatus",this.addForm)
                .then(res =>{
                    console.log(res)
                    this.addDialog=false
                    this.getUserList()
                    // 提示
                    if(res.result==1){
                        this.$message({
                            type: 'success',
                            message: res.resultDesc,
                        });
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: res.resultDesc,
                        });
                    }
                })
            })
        },
            // 请求来角色下拉列表
            getRole(){
                request("post","/Role_Info/GetStatus",this.Info)
                .then(res =>{
                    console.log(res)
                    this.rolelist=res.resultList
                })
            },
            // 请求来所属部门下拉列表
            getDept(){
                request("post","/Department/GetStatus",this.userInfo)
                .then(res =>{
                    console.log(res)
                    this.deptlist=res.resultList
                })
            },
        // 关闭添加用户对话框
        addDialogClosed(){
            console.log("关闭")
            // 关闭对话框后重置里面内容
            this.$refs.addUserlistFormRef.resetFields()
        },

        // 点击修改编辑某行数据对话框
        updateDialogBtn(id,name,nickname,mobile,deptid,roleid,orgid){
            this.updateDialog=true,
            this.updateForm.user_id=id,
            this.updateForm.user_name=name,
            this.updateForm.user_nickname=nickname,
            this.updateForm.user_mobile=mobile,
            this.updateForm.dept_id=deptid
            this.updateForm.role_id=roleid
            this.updateForm.organization_id=orgid
        },
        // 修改用户信息并提交
        async updateUser(){
            await this.$refs.updateUserlistFormRef.validate(valid =>{
                // console.log(valid)
                if(!valid) return
                request("post","User_Info/UpdateStatus",this.updateForm)
                .then(res =>{
                    console.log(res)
                    this.updateDialog=false
                    this.getUserList()
                    // 提示
                    if(res.result==1){
                        this.$message({
                            type: 'success',
                            message: res.resultDesc,
                        });
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: res.resultDesc,
                        });
                    }
                })
            })
        },

        // 删除事件
        deleteDialog(id){
            this.$confirm('您确定要删除该数据吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteuser.user_id = id
                // 点击确定执行删除事件
                this.deleteUser()
            }).catch(() => {});
        },
        // 点击删除本行用户
        async deleteUser(){
            await request("post","/User_Info/DeleteStatus",this.deleteuser)
            .then(res=>{
                this.getUserList()
                // 提示
                if(res.result==1){
                    this.$message({
                        type: 'success',
                        message: res.resultDesc,
                    });
                }
                else{
                    this.$message({
                        type: 'warning',
                        message: res.resultDesc,
                    });
                }
            })
        },

        // 重置密码
        resetPassword(id){
            this.$confirm('您确定要重置此人的密码么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.resetpassword.user_id = id
                // 点击确定重置密码并提示
                request("post","User_Info/UpdateRestStatus",this.resetpassword)
                .then(res=>{
                    this.getUserList()
                    if(res.result==1){
                        this.$message({
                            type: 'success',
                            message: res.resultDesc,
                        });
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: res.resultDesc,
                        });
                    }
                })
            }).catch(() => {
            });
        },

        // 分页的设置
        // 一页几条
        handleSizeChange(newSize){
            console.log(newSize)
            this.pageSize=newSize
        },
        // 点击设置第几页
        handleCurrentChange(newPage){
            console.log(newPage)
            this.pageIndex=newPage
        }
    }
}
</script>

<style scoped>
.el-table{
    width: 100%;
}
.el-card{
    height: 100%;
    margin-top: 20px;
    background-color: #F5F7FB;
}
.wrapper{
    padding: 40px 30px 20px;
    background-color: white;
}

/* 对话框 */
.el-form{
    padding-right:30px;
}
.el-form .el-form-item .el-input,.el-select{
    width: 100%;
}

/* 分页 */
.page{
    background-color: white;
}
.el-pagination{
    padding-top: 20px;
}

/* 搜索布局开始 */
.search{
    width: 100%;
}
.search .el-button{
    color: #0846B9;
}
.search .search-up{
    text-align: right;
}
.search-down{
    background-color: white;
    margin-top: 10px;
    padding: 0px 130px;
    text-align: left;
}
.search-input{
    width: 400px;
}
.search-down-btn{
    margin: 20px 0px 0px 400px;
    width: 130px;
}

/* 表格操作列的链接的下划线设置 */
.el-table .el-button{
    /* text-decoration: underline; */
    color: #606266;
    padding-bottom: 1px;
    border-bottom: 1px solid;
    border-radius: 0px;
}

</style>